<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>休闲游戏 - 4399小游戏</title>
    <link rel="stylesheet" href="../css/styles.css">
    <script src="../js/main.js" defer></script>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1>4399小游戏</h1>
            </div>
            <ul class="nav-links">
                <li><button id="uploadBtn" class="upload-btn">上传游戏</button></li>
                <li><a href="../index.html">首页</a></li>
                <li><a href="#" class="active">小游戏</a></li>
            </ul>
            <div class="search-box">
                <input type="text" placeholder="搜索游戏...">
                <button>搜索</button>
            </div>
        </nav>
    </header>

    <div class="container">
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3>快速导航</h3>
                <ul>
                    <li><a href="#"><i class="icon">🎮</i>热门游戏</a></li>
                    <li><a href="#"><i class="icon">🌟</i>最新游戏</a></li>
                    <li><a href="#"><i class="icon">🏆</i>排行榜</a></li>
                </ul>
            </div>
            <div class="sidebar-section">
                <h3>游戏分类</h3>
                <ul>
                    <li><a href="casual.html" class="active"><i class="icon">🎲</i>休闲游戏</a></li>
                    <li><a href="action.html"><i class="icon">⚔️</i>动作游戏</a></li>
                    <li><a href="puzzle.html"><i class="icon">🧩</i>益智游戏</a></li>
                    <li><a href="adventure.html"><i class="icon">🏃</i>冒险游戏</a></li>
                </ul>
            </div>
        </aside>

        <main>
            <section class="category-header">
                <h2>休闲游戏</h2>
                <p>轻松有趣的休闲游戏，适合所有年龄段的玩家</p>
            </section>

            <section class="games-grid">
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="泡泡龙">
                    <h3>泡泡龙</h3>
                    <p>经典泡泡消除游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="水果连连看">
                    <h3>水果连连看</h3>
                    <p>趣味水果配对游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="开心农场">
                    <h3>开心农场</h3>
                    <p>轻松种植收获的乐趣</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="宠物小屋">
                    <h3>宠物小屋</h3>
                    <p>照顾可爱宠物的游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="钓鱼达人">
                    <h3>钓鱼达人</h3>
                    <p>悠闲的钓鱼游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="餐厅经营">
                    <h3>餐厅经营</h3>
                    <p>经营自己的餐厅</p>
                </div>
            </section>
        </main>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于作者</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>帮助中心</h4>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">游戏攻略</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="https://weixin.qq.com/" target="_blank" title="关注我们的微信公众号">微信</a>
                    <a href="https://im.qq.com/" target="_blank" title="加入我们的QQ群">QQ</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2025 4399小游戏. All rights reserved.</p>
        </div>
    </footer>

    <script src="../js/api.js"></script>
    <script src="../js/main.js"></script>
    <script src="../js/upload.js"></script>
</body>
</html> 